M
MLOG
React Lazy Loading : Division du code en composants pour une performance optimisée | MLOG | MLOG ); } export default ImageGallery;

Et le composant Image.js :


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

Dans cet exemple, chaque image est enveloppĂ©e dans un composant <Suspense>, de sorte qu'un message de chargement s'affiche pour chaque image pendant son chargement. Cela empĂȘche le blocage de toute la page pendant le tĂ©lĂ©chargement des images.

Techniques avancées et considérations

1. Limites d'erreur

Lorsque vous utilisez le lazy loading, il est important de gĂ©rer les erreurs potentielles qui peuvent survenir pendant le processus de chargement. Les limites d'erreur peuvent ĂȘtre utilisĂ©es pour intercepter ces erreurs et afficher une interface utilisateur de repli. Vous pouvez crĂ©er un composant de limite d'erreur comme ceci :


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Ensuite, enveloppez le composant <Suspense> avec le <ErrorBoundary> :



  Loading...}>

Si une erreur se produit lors du chargement de MyComponent, le <ErrorBoundary> l'interceptera et affichera l'interface utilisateur de repli.

2. Rendu cÎté serveur (SSR) et Lazy Loading

Le lazy loading peut Ă©galement ĂȘtre utilisĂ© en conjonction avec le rendu cĂŽtĂ© serveur (SSR) pour amĂ©liorer le temps de chargement initial de votre application. Toutefois, cela nĂ©cessite une configuration supplĂ©mentaire. Vous devrez vous assurer que le serveur peut correctement gĂ©rer les importations dynamiques et que les composants chargĂ©s paresseusement sont correctement hydratĂ©s du cĂŽtĂ© client.

Des outils comme Next.js et Gatsby.js offrent une prise en charge intégrée du lazy loading et de la division du code dans les environnements SSR, ce qui facilite grandement le processus.

3. Préchargement des composants chargés paresseusement

Dans certains cas, vous voudrez peut-ĂȘtre prĂ©charger un composant chargĂ© paresseusement avant qu'il ne soit rĂ©ellement nĂ©cessaire. Cela peut ĂȘtre utile pour les composants qui sont susceptibles d'ĂȘtre rendus bientĂŽt, tels que les composants situĂ©s sous la ligne de flottaison mais qui sont susceptibles d'ĂȘtre affichĂ©s. Vous pouvez prĂ©charger un composant en appelant manuellement la fonction import() :


import('./MyComponent'); // Preload MyComponent

Cela démarrera le chargement du composant en arriÚre-plan, de sorte qu'il sera disponible plus rapidement lorsqu'il sera réellement rendu.

4. Importations dynamiques avec commentaires magiques Webpack

Les "commentaires magiques" de Webpack permettent de personnaliser les noms des morceaux de code gĂ©nĂ©rĂ©s. Cela peut ĂȘtre utile pour dĂ©boguer et analyser la structure du bundle de votre application. Par exemple :


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Cela créera un morceau de code nommé "my-component.js" (ou similaire) au lieu d'un nom générique.

5. Éviter les piùges courants

Exemples concrets et cas d'utilisation

Le lazy loading peut ĂȘtre appliquĂ© Ă  un large Ă©ventail de scĂ©narios pour amĂ©liorer les performances des applications React. Voici quelques exemples :

Exemple : Site web de commerce Ă©lectronique international

Imaginez un site web de commerce électronique vendant des produits dans le monde entier. Différents pays peuvent avoir des devises, des langues et des catalogues de produits différents. Au lieu de charger toutes les données pour chaque pays au départ, vous pouvez utiliser le lazy loading pour charger les données spécifiques à l'emplacement de l'utilisateur uniquement lorsqu'il visite le site.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Fonction pour déterminer le pays de l'utilisateur

  return (
    Loading content for your region...}>
      
      
    
  );
}

Conclusion

Le lazy loading et la division du code en composants sont des techniques puissantes pour optimiser les performances des applications React. En ne chargeant les composants que lorsqu'ils sont nécessaires, vous pouvez réduire considérablement le temps de chargement initial, améliorer l'expérience utilisateur et améliorer votre SEO. Les composants intégrés React.lazy() et <Suspense> de React facilitent l'implémentation du lazy loading dans vos projets. Adoptez ces techniques pour créer des applications web plus rapides, plus réactives et plus attrayantes pour un public mondial.

N'oubliez pas de toujours tenir compte de l'expérience utilisateur lors de l'implémentation du lazy loading. Fournissez des interfaces utilisateur de repli informatives, gérez gracieusement les erreurs potentielles et analysez attentivement les performances de votre application pour vous assurer d'obtenir les résultats souhaités. N'ayez pas peur d'expérimenter différentes approches et de trouver la meilleure solution pour vos besoins spécifiques.